<template>
    <div id="app">
        <el-container style="background: url(http://rww08uahf.hn-bkt.clouddn.com/0dd8ed5b730c4df7babec5898c4b641c.png);">
            <!--抬头开始-->
           <el-header>
               <Top/>
           </el-header>
            <!--抬头结束-->
            <!--内容开始-->
            <el-main>
                <el-card style="background-color: rgba(255,255,255,20%); margin:0">
                    <h3 style="color: white;text-align: center">我们是一个新成立的网站，依靠广大赞助者的帮助来支持我们的持续发展。
                        如果您有兴趣成为我们的赞助者，请看以下赞助层级及其所含内容。</h3>
                </el-card>
                <hr>
                <el-row :gutter="15" class="sponsor-card">
                    <el-col :span="8">
                        <el-card style="background-color: rgba(255,255,255,20%);height: 652px;">
                            <el-carousel height="130px" width="200px" indicator-position="outside">
                                <el-carousel-item >
                                        <img src="../../assets/title/钻石赞助大使.gif" alt="">
                                </el-carousel-item>
                                <el-carousel-item >
                                        <img src="../../assets/title/白金赞助大使.gif" alt="">
                                </el-carousel-item>
                                <el-carousel-item >
                                        <img src="../../assets/title/黄金赞助大使.gif" alt="">
                                </el-carousel-item>
                                <el-carousel-item >
                                        <img src="../../assets/title/白银赞助大使.gif" alt="">
                                </el-carousel-item>
                                <el-carousel-item >
                                        <img src="../../assets/title/青铜赞助大使.gif" alt="">
                                </el-carousel-item>
                            </el-carousel>
                            <div slot="header" class="clearfix">
                                <h1 style="text-align: center; margin: 10px 10px;color: gold">专属赞助福利</h1>
                            </div>
                            <el-divider></el-divider>
                            <ul style="line-height: 1.8;">
                                <li style="color: white">您将获得专属赞助等级头衔</li>
                                <li style="color: white">您的公司的名称和链接将被放在赞助者列表中</li>
                                <li style="color: white">我们将在社交媒体上宣传您的赞助信息</li>
                                <li style="color: white">您的公司的标识将出现在我们的页面底部</li>
                                <li style="color: white">我们将发送感谢信给您</li>
                            </ul>
                        </el-card>
                    </el-col>

                    <el-col span="8">
                        <el-card style="background-color: rgba(255,255,255,60%);height: 652px;">
                            <h1 style="text-align: center; margin: 30px 30px;color: gold">赞助充值</h1>
                            <div class="amount-container" >
                                <el-button type="primary" plain style="margin-left: 6%;margin-right: 6%;margin-top:5%;height: 40px;width: 90px;"
                                    v-for="amount in amounts"
                                           :key="amount" :data-amount="amount"
                                           :class="{ 'is-active': activeAmount === amount }" @click="activeAmount = amount">{{amount}}
                                </el-button>
                            </div>

                            <el-form >
                                <el-input v-model="activeAmount" type="number" min="0" @input="validateAmount" placeholder="请输入正整数金额" style="width: 80% ;margin-top: 10%;margin-left: 10%"></el-input>
                            </el-form>

                            <div style="text-align: center; margin-top: 25px;">
                                <el-button type="primary" round size="large" @click="pay()" >立即支付</el-button>
                            </div>
                        </el-card>
                    </el-col>
                    <!--                时间轴-->
                    <el-col :span="8">
                        <el-card style="background-color: rgba(255,255,255,20%)">
                            <div class="custom-timeline">
                                <el-timeline>
                                    <el-timeline-item :timestamp="this.timeStr.message"  :color="this.timeStr.color"  placement="top" size="large">
                                        <el-card style="background-color: rgba(255,255,255,20%);height: 80px;">
                                            <h3 style=" margin: 0;vertical-align: top;color: gold">钻石赞助大使</h3>
                                            <p style="color: whitesmoke">{{ this.timeStr.word }}</p>
                                        </el-card>
                                    </el-timeline-item>
                                    <el-timeline-item :timestamp="this.timeStr.message"  :color="this.timeStr.color"  placement="top" size="large">
                                        <el-card style="background-color: rgba(255,255,255,20%);height: 80px;">
                                            <h3 style=" margin: 0;vertical-align: top;color: gold">白金赞助大使</h3>
                                            <p style="color: whitesmoke">{{ this.timeStr.word }}</p>
                                        </el-card>
                                    </el-timeline-item>
                                    <el-timeline-item :timestamp="this.timeStr.message"   :color="this.timeStr.color" size="large" placement="top">
                                        <el-card style="background-color: rgba(255,255,255,20%);height: 80px;">
                                            <h3 style=" margin: 0;vertical-align: top;color: gold">黄金赞助大使</h3>
                                            <p style="color: whitesmoke">{{ this.timeStr.word }}</p>
                                        </el-card>
                                    </el-timeline-item>
                                    <el-timeline-item :timestamp="this.timeStr.message"  :color="this.timeStr.color" size="large" placement="top">
                                        <el-card style="background-color: rgba(255,255,255,20%);height: 80px;">
                                            <h3 style=" margin: 0;vertical-align: top;color: gold">白银赞助大使</h3>
                                            <p style="color: whitesmoke">{{ this.timeStr.word }}</p>
                                        </el-card>
                                    </el-timeline-item>
                                    <el-timeline-item :timestamp="this.timeStr.message"  :color="this.timeStr.color" size="large"  placement="top">
                                        <el-card style="background-color: rgba(255,255,255,20%);height: 80px;">
                                            <h3 style=" margin: 0;vertical-align: top;color: gold">青铜赞助大使</h3>
                                            <p style="color: whitesmoke">{{ this.timeStr.word }}</p>
                                        </el-card>
                                    </el-timeline-item>
                                </el-timeline>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
            </el-main>
            <!--内容结束-->
            <!--底部开始-->

               <Bottom/>

            <!--底部结束-->
        </el-container>
    </div>
</template>
<script>
import Top from "@/components/Top.vue";
import axios from "axios";
import '@/api/request'
import activeIndex from "@/components/Top.vue";
import res from "core-js/internals/is-forced";
import Bottom from "@/components/Bottom.vue";

export default {
    components: {Bottom, Top},
    data: function () {
        return {
            timeStr: {
                word:'请再接再厉哦!',
                message: '暂未获得',
                color:'',
            },
            amounts: [10, 20, 50, 100, 200, 500], // 充值选项卡金额数组
            activeAmount: 50,// 默认选中的金额
            tableData: [{ 'col-1': '' },]
        }
    },
    computed: {
        noMore() {
            return this.count >= 20
        },
        disabled() {
            return this.loading || this.noMore
        }
    },

    mounted(){
        this.init();
    },
    methods: {
        validateAmount() {
            // 移除前导的0
            this.activeAmount = this.activeAmount.replace(/^0+(?=\d)/, '');
            // 检查是否为正数金额
            const Amount = parseFloat(this.activeAmount);
            if (isNaN(Amount) || Amount <= 0||this.activeAmount.includes(".")){
                this.activeAmount = "";
            }
        },

        pay() {// 在这里处理支付逻辑
            const user = localStorage.getItem('user');
            if (user===null){
                alert('请先登录！');
                window.location.href='loginByPassword.html'
            }
            // console.log(`支付了 ${this.activeAmount} 元，表单数据为：`, this.tableData)
            let url = 'http://localhost:8088/pay/alipay?money='
            if (this.activeAmount>0) {
                axios.post(url + this.activeAmount).then((response) => {
                    document.write(response.data)
                });
            }
        },

        init(){
            this.axios.get('http://localhost:8088/user/info/'+id).then((res) => {
                console.log(res.data);
                let state= res.data;
                if (state.getTime != null) {
                    this.timeStr.word="恭喜您获得该头衔!";
                    this.timeStr.message="于"+state.getTime+"获得该头衔!";
                    this.timeStr.color="#2796be";
                }
            });
        },
    }
}
</script>
<style>
@import url(//at.alicdn.com/t/c/font_4004562_b46lfqtm52u.css);
body {
    margin: 0;
    overflow-y: scroll;
    overflow-x: hidden;
    /* 背景渐变 */
    background: linear-gradient(90deg, rgba(247, 149, 51, .1), rgba(243, 112, 85, .1) 15%, rgba(239, 78, 123, .1) 30%, rgba(161, 102, 171, .1) 44%, rgba(80, 115, 184, .1) 58%, rgba(16, 152, 173, .1) 72%, rgba(7, 179, 155, .1) 86%, rgba(109, 186, 130, .1));
}
.shadow {
    box-shadow: 0 4px 8px 6px rgba(7, 17, 27, .06);
}

::-webkit-scrollbar {
    /*滚动条整体样式*/
    width : 4px;  /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
}
::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius   : 10px;
    background-color: #1d2d44;
    background-image: -webkit-linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.2) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.2) 50%,
        rgba(255, 255, 255, 0.2) 75%,
        transparent 75%,
        transparent
    );
}
::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
    background   : #ededed;
    border-radius: 10px;
}

.center {
    width: 100%;
    margin: 0 auto;
    min-width: 1200px;

}

.el-header {
    background-color: white;
    padding: 20px 0
}

.item {
    flex-basis: 20%;
    /* 设置为固定的宽度，以便自动调整卡片大小 */
    text-align: center;
}

/* 走马灯*/
.el-carousel__item {
    color: #475669;
    font-size: 14px;
    line-height: 200px;
    display: flex;
}

.el-timeline-item__tail {
    left: 4px;
    border-left: 5px solid #E4E7ED;
}

.custom-timeline .el-timeline-item__node {
    border: 2px solid #9ed9c9;
    background-color: white;
}
</style>
